<template>
  <div>
         <!-- 订单 -->
     <div class='tail' >
         <div class='Order-Number ' >
             <div ><i>订单号</i>：201802205011232</div>
             <div>等待支付</div>

         </div>
        
     </div>
        <div class='introduce' >
            <router-link to='/LineItem' tag="div"><img :src="url" alt=""></router-link>
            <div class='introduce-text'>
                <div>{{title}}</div>
                <div>合计：￥ {{price}} </div>
            </div>

         </div>
    <!-- 数量 -->
         <div>
             <div class='sum-number'>
                 <div>数量</div>
                 <div>共1件  <span> ></span></div>
             </div>
             <div class='payment '>
                <div><i>立即付款</i></div>
             </div>
         </div>




  </div>
</template>


<script scoped>
import api from '../../../api'
export default {
   name:'pay',
   data(){
       return{
            
           price:'' ,
           title:'',
           url:''
       }
   },
  mounted(){
      api.getJxtz().then(res=>{
      
          this.price=res.data.list[0].price
          this.title=res.data.list[0].title
          this.url=res.data.list[0].url
      })
  }
   
}
</script>

<style>
/* 订单 */
.tail{
    margin-top:8px ;
     height:30px
}
.Order-Number{
width: 375px;
height:60px ;


}

.Order-Number div{
      float: left;
      margin-left: 13px;
}
.Order-Number div i{
    font-size: 17px;
    font-style: normal;
    color: 	#808080;
}

.Order-Number div:nth-child(2){
    float:right;
    color: red;
    margin-right: -10px
}
/* 图片 */
 .introduce img{
    width: 84px;
    height: 84px;
    margin-left: 11px;
margin-top:11px ;
float: left;
   
 }
     



.introduce div:nth-child(2){
    width: 260px;
  

}
.introduce{
   overflow: hidden;
}
.introduce div{
    float: left;
}
.introduce-text{
    margin-top: 10px;
    margin-left: 8px;
}
.introduce-text div:nth-child(1){
    width:230px;
    height: 40px;
    font-size: 18px;
   
}
.introduce-text div:nth-child(2){
    margin-top: 27px;
    color: 	#808080;
 
}
.sum-number div{
 float: left;
}
.sum-number{
    overflow: hidden;
    margin-bottom: 10px;
    }
.sum-number div:nth-child(2){
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}
.sum-number div:nth-child(1){
    float: left;
    margin-left: 11px;
     margin-top: 15px;
}
.sum-number div span{
    font-size: 20px;
}
.payment{
    border-top:1px solid #dcdcdc;
}
.payment div{
    float:right;
    border-radius:100px ;
    width: 100px;
    height: 30px;
    background-color:	#696969;
    margin-right: 17px;
    margin-top: 13px;
    
} 
.payment div i{
    font-style:normal ;
    color: white;
    line-height: 30px;
    margin-left:20px;
} 


</style>